<template>
    <div>
        <el-dialog title="新增工资条" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <!-- <el-option label="区域一" value="shanghai"></el-option> -->
      <!-- <el-option label="区域二" value="beijing"></el-option> -->
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
 
  <el-form-item>
    <el-button style="background-color:rgb(212, 169, 233);" >新增</el-button>
    <el-button >取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            defaultProps: {
          children: 'children',
          label: 'label'
        },
            dialogFormVisible:false,
            form:{
                region:'',
                desc:''
            },
            data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        }
    },
    methods: {
        handleNodeClick(data) {
        console.log(data);
      }
    },
}
</script>